<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"
		xmlns:x2="http://www.w3.org/TR/xhtml2"
		xmlns:role="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"
		xmlns:state="http://www.w3.org/2005/07/aaa">
<head>
<title>Yahoo! UI Library - Slider Widget</title>
<link rel="stylesheet" type="text/css" href="css/screen.css">
<style type="text/css">
</style>
</head>
<body> 
<div id="pageTitle"><h3>Drag and Drop - Slider Widgets</h3></div> 

<div id="container">
  <div id="containerTop">
    <div id="header"><img src="img/logo.gif" vspace="4" hspace="4" /></div>
	<div id="main">

		<div id="content"> 
		  <div class="newsItem"> 
			<h3>Basic Sliders</h3>
			  <p>
				The slider widget is an implementation of YAHOO.util.DragDrop 
				It also will use YAHOO.util.Animation if available to
				animate the movement of the thumb when you click the 
				slider background.

				The only difference between the two sliders aside from
				the fact that one is vertical and one horizontal is that 
				the horizontal slider implements the "tick mark" feature
				of drag and drop; it will "snap" to the tick marks spaced
				25 pixels apart.
			  </p>
              <!--
			  <p>
				<a href="javascript:slider1.lock()">Lock</a>
				<a href="javascript:slider1.unlock()">Unlock</a>
			  </p>
              -->

              <div id="vertWrapper">
              <div 
                 id="vertBGDiv"
                 name="vertBGDiv"
                 tabindex="0" 
                 x2:role="role:slider" 
                 state:valuenow="0" 
                 state:valuemin="0" 
                 state:valuemax="200"
                 title="Vertical Slider" 
                 onkeypress="return handleVertSliderKey(this, YAHOO.util.Event.getEvent(event))"
               >
              <div id="vertHandleDiv"><img src="img/vertSlider.png"></div> 
              </div>

                <div id="vertValueDiv">
                    <form name="formV" onsubmit="return updateVert()">
                    <input name="vertVal" id="vertVal" type="text" value="0" size="4" maxlength="4" />
                    <input type="button" value="Update" onclick="updateVert()" />
                    </form>
                </div>


              </div>
 
           <div id="horizWrapper">
           <div
             id="horizBGDiv"
             name="horizBGDiv"
             tabindex="0" 
             x2:role="role:slider" 
             state:valuenow="0" 
             state:valuemin="-100" 
             state:valuemax="100"
             title="Horizontal Slider" 
             onkeypress="return handleHorizSliderKey(this, YAHOO.util.Event.getEvent(event))"
           >
             <div id="horizHandleDiv" ><img src="img/horizSlider.png"></div> 

          </div> 

            <div id="horizValueDiv">
                <form name="formH" onsubmit="return updateHoriz()">
                <input name="horizVal" id="horizVal" type="text" value="0" size="4" maxlength="4" />
                <input type="button" value="Update" onclick="updateHoriz()" />
                </form>
            </div>


          </div>

     
		</div> 
      
    </div>
  </div>
</div>

<div id="content"> 
    <h3>Color Picker</h3>
      <p>
      Implements a slider region and a vertical slider to implement an HSV color
      picker.
      </p>

        <div id="pickerPanel" class="dragPanel">
            <h4 id="pickerHandle">&nbsp;</h4>
            <div id="pickerDiv">
              <img id="pickerbg" src="img/pickerbg.png" alt="">
              <div id="selector"><img src="img/select.gif"></div> 
            </div>

             <div id="hueBg">
              <div id="hueThumb"><img src="img/hline.png"></div> 
            </div> 

            <div id="pickervaldiv">
                <form name="pickerform" onsubmit="return pickerUpdate()">
                <br />
                R <input name="pickerrval" id="pickerrval" type="text" value="0" size="3" maxlength="3" />
                H <input name="pickerhval" id="pickerhval" type="text" value="0" size="3" maxlength="3" />
                <br />
                G <input name="pickergval" id="pickergval" type="text" value="0" size="3" maxlength="3" />
                S <input name="pickergsal" id="pickersval" type="text" value="0" size="3" maxlength="3" />
                <br />
                B <input name="pickerbval" id="pickerbval" type="text" value="0" size="3" maxlength="3" />
                V <input name="pickervval" id="pickervval" type="text" value="0" size="3" maxlength="3" />
                <br />
                <br />
                # <input name="pickerhexval" id="pickerhexval" type="text" value="0" size="6" maxlength="6" />
                <br />

                </form>
            </div>

            <div id="pickerSwatch">&nbsp;</div>
        </div>


		</div> 
      
    </div>
  </div>
</div>

<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="../../build/event/event.js" ></script>
<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/logger/logger.js" ></script>

<script type="text/javascript" src="../../build/dragdrop/dragdrop.js" ></script>
<script type="text/javascript" src="js/color.js" ></script>
<script type="text/javascript" src="js/key.js" ></script>
<script type="text/javascript" src="../../build/animation/animation.js" ></script>
<script type="text/javascript" src="../../build/slider/slider.js" ></script>
<script type="text/javascript">

	var hue;
	var picker;
	var dd1, dd2;
	var r, g, b;

	function init() {
        standardSliderInit();
        // rgbInit();
        pickerInit();
    }

    // Picker ---------------------------------------------------------

    function pickerInit() {
		hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);
		hue.onChange = function(newVal) { hueUpdate(newVal); };

		picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 
				0, 180, 0, 180);
		picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };

		hueUpdate();

		dd1 = new YAHOO.util.DD("pickerPanel");
		dd1.setHandleElId("pickerHandle");
		dd1.endDrag = function(e) {
			// picker.thumb.resetConstraints();
			// hue.thumb.resetConstraints(); 
        };
	}

	window.onload = init;

	function pickerUpdate(newX, newY) {
		pickerSwatchUpdate();
	}

	function hueUpdate(newVal) {

		var h = (180 - hue.getValue()) / 180;
		if (h == 1) { h = 0; }

		YAHOO.log("hue " + hue.getValue());

		var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);

		document.getElementById("pickerDiv").style.backgroundColor = 
			"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";

		pickerSwatchUpdate();
	}

	function pickerSwatchUpdate() {
		var h = (180 - hue.getValue());
		if (h == 180) { h = 0; }
		document.getElementById("pickerhval").value = (h*2);

		h = h / 180;
		YAHOO.log("h " + hue.getValue());

		var s = picker.getXValue() / 180;
		document.getElementById("pickersval").value = Math.round(s * 100);

		YAHOO.log("s " + s);

		var v = (180 - picker.getYValue()) / 180;
		document.getElementById("pickervval").value = Math.round(v * 100);

		YAHOO.log("v " + v);

		var a = YAHOO.util.Color.hsv2rgb( h, s, v );

		document.getElementById("pickerSwatch").style.backgroundColor = 
			"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";

		document.getElementById("pickerrval").value = a[0];
		document.getElementById("pickergval").value = a[1];
		document.getElementById("pickerbval").value = a[2];
		document.getElementById("pickerhexval").value = 
			YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);
	}


    // RGB slider ---------------------------------------------------------

	function rgbInit() {

		r = YAHOO.widget.Slider.getHorizSlider("rBG", "rthumb", 0, 128);
		r.onChange = function(newVal) { listenerUpdate("r", newVal*2); };

		g = YAHOO.widget.Slider.getHorizSlider("gBG", "gthumb", 0, 128);
		g.onChange = function(newVal) { listenerUpdate("g", newVal*2); };

		b = YAHOO.widget.Slider.getHorizSlider("bBG", "bthumb", 0, 128);
		b.onChange = function(newVal) { listenerUpdate("b", newVal*2); };

		initColor();

		dd2 = new YAHOO.util.DD("rgbPanel");
		dd2.setHandleElId("rgbHandle");
		dd2.endDrag = function(e) {
			// r.thumb.resetConstraints();
			// g.thumb.resetConstraints();
			// b.thumb.resetConstraints();
		}
	}


	function initColor() {
		var ch = " ";

		d = document.createElement("P");
		d.className = "rb";
		r.getEl().appendChild(d);
		d = document.createElement("P");
		d.className = "rb";
		g.getEl().appendChild(d);
		d = document.createElement("P");
		d.className = "rb";
		b.getEl().appendChild(d);

		for (var i=0; i<34; i++) {
			d = document.createElement("SPAN");
			d.id = "rBG" + i
			// d.innerHTML = ch;
			r.getEl().appendChild(d);

			d = document.createElement("SPAN");
			d.id = "gBG" + i
			// d.innerHTML = ch;
			g.getEl().appendChild(d);

			d = document.createElement("SPAN");
			d.id = "bBG" + i
			// d.innerHTML = ch;
			b.getEl().appendChild(d);
		}

		d = document.createElement("P");
		d.className = "lb";
		r.getEl().appendChild(d);
		d = document.createElement("P");
		d.className = "lb";
		g.getEl().appendChild(d);
		d = document.createElement("P");
		d.className = "lb";
		b.getEl().appendChild(d);

		userUpdate();
	}

	function updateSliderColors() {
		var curr, curg, curb;
		curr = Math.min(r.getValue() * 2, 255);
		curg = Math.min(g.getValue() * 2, 255);
		curb = Math.min(b.getValue() * 2, 255);

        YAHOO.log("updateSliderColor " + curr + ", " + curg + ", " + curb);

		var d;
		for (var i=0; i<34; i++) {
			d = document.getElementById("rBG" + i);
			d.style.backgroundColor = 
				"rgb(" + (i*8) + "," + curg + "," + curb + ")";

			d = document.getElementById("gBG" + i);
			d.style.backgroundColor = 
				"rgb(" + curr + "," + (i*8) + "," + curb + ")";

			d = document.getElementById("bBG" + i);
			d.style.backgroundColor = 
				"rgb(" + curr + "," + curg + "," + (i*8) + ")";
		}

		document.getElementById("rgbSwatch").style.backgroundColor =
			"rgb(" + curr + "," + curg + "," + curb + ")";

		document.getElementById("hexval").value = 
					YAHOO.util.Color.rgb2hex(curr, curg, curb);
	}


	function listenerUpdate(whichSlider, newVal) {
		if (newVal == 256) {
			newVal = 255;
		}
		document.getElementById(whichSlider + "val").value = newVal;
		updateSliderColors();
	}

	function userUpdate(isHex) {
        YAHOO.log("userupdate");
		var v;
		var f = document.forms['rgbform'];

		if (isHex) {
			var hexval = f["hexval"].value;
			// shorthand #369
			if (hexval.length == 3) {
				var newval = "";
				for (var i=0;i<3;i++) {
					var a = hexval.substr(i, 1);
					newval += a + a;
				}

				hexval = newval;
			}

			YAHOO.log("hexval:" + hexval);

			if (hexval.length != 6) {
				alert("illegal hex code: " + hexval);
			} else {
				var rgb = YAHOO.util.Color.hex2rgb(hexval);
				// alert(rgb.toString());
				if (YAHOO.util.Color.isValidRGB(rgb)) {
					f['rval'].value = rgb[0];
					f['gval'].value = rgb[1];
					f['bval'].value = rgb[2];
				}
			}
		}

		// red
		v = parseFloat(f['rval'].value);
		v = ( isNaN(v) ) ? 0 : Math.round(v);
		r.setValue(Math.round(v) / 2);

		v = parseFloat(f['gval'].value);
		v = ( isNaN(v) ) ? 0 : Math.round(v);
		g.setValue(Math.round(v) / 2);

		v = parseFloat(f['bval'].value);
		v = ( isNaN(v) ) ? 0 : Math.round(v);
		b.setValue(Math.round(v) / 2);

		updateSliderColors();

		return false;
	}

	function userReset() {
		var v;
		var f = document.forms['rgbform'];

		r.setValue(0);
		g.setValue(0);
		b.setValue(0);
	}

var slider1, slider2;
	function standardSliderInit() {

		slider1 = YAHOO.widget.Slider.getVertSlider("vertBGDiv", "vertHandleDiv", 0, 200);

		slider1.onChange = function(offsetFromStart) {
			document.getElementById("vertVal").value = offsetFromStart;
		}

		slider2 = YAHOO.widget.Slider.getHorizSlider("horizBGDiv", "horizHandleDiv", 100, 100, 25);

		slider2.onChange = function(offsetFromStart) {
			document.getElementById("horizVal").value = offsetFromStart;
		}

        // if (document.getElementById("vertBGDiv").getAttributeNS) {
            // slider1.focusOnClick = true;
            // slider2.focusOnClick = true;
        // }
	}

	function updateVert() {
		var v = parseFloat(document.forms['formV']['vertVal'].value, 10);
		if ( isNaN(v) ) v = 0;
		slider1.setValue(Math.round(v));
		return false;
	}
	
	function updateHoriz() {
		var v = parseFloat(document.forms['formH']['horizVal'].value, 10);
		if ( isNaN(v) ) v = 0;
		slider2.setValue(Math.round(v));
		return false;
	}

// accessibility keypress test
function handleHorizSliderKey(slider, ev) {
    YAHOO.log("horizontal slider keypress");

    // Firefox 1.5+ only at this point
    if (!slider.getAttributeNS) {
        return true;
    }

	// var valueNow = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow"));

	var valueNow = slider2.getValue();

	var valueMin = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemin"));
	var valueMax = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemax"));

	var delta = 0;

	var kc = ev.keyCode;

	YAHOO.log("keycode: " + kc);

	if (kc == YAHOO.util.Key.DOM_VK_LEFT) {
		delta = -25;
	} else if (kc == YAHOO.util.Key.DOM_VK_RIGHT) {
		delta = 25;
	} else if (kc == YAHOO.util.Key.DOM_VK_HOME) {
		delta = -( valueNow - valueMin );
	} else if (kc == YAHOO.util.Key.DOM_VK_END) {
		delta = valueMax - valueNow;
	} else {
		return true;
	}
	
	valueNow += delta;

	slider2.setValue(valueNow, true);

	slider.setAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow", valueNow);
	
	// displaySlider(slider);

	return false;
}

function handleVertSliderKey(slider, ev) {
	YAHOO.log("vertical slider keypress");

    // Firefox 1.5+ only at this point
    if (!slider.getAttributeNS) {
        return true;
    }

	// var valueNow = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow"));

	var valueNow = slider1.getValue();

	var valueMin = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemin"));
	var valueMax = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemax"));

	var delta = 0;
	var kc = ev.keyCode;
	if (kc == YAHOO.util.Key.DOM_VK_UP) {
		delta = -20;
	}
	else if (kc == YAHOO.util.Key.DOM_VK_DOWN) {
		delta = 20;
	}
	else if (kc == YAHOO.util.Key.DOM_VK_HOME) {
		delta = -( valueNow - valueMin );
	}
	else if (kc == YAHOO.util.Key.DOM_VK_END) {
		delta = valueMax - valueNow;
	}
	else {
		return true;
	}
	
	valueNow += delta;
	if (valueNow < valueMin) {
		valueNow = valueMin;
	}

	if (valueNow > valueMax) {
		valueNow = valueMax;
	}  
	slider.setAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow", valueNow);
	
	// displaySlider(slider);
	slider1.setValue(valueNow, true);

	return false;
}

</script>


<!--[if gte IE 5.5000]>
<script type="text/javascript">

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
   {
   for(var i=0; i<document.images.length; i++)
      {
	  var img = document.images[i]
	  var imgName = img.src.toUpperCase()
	  if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
	     {
		 var imgID = (img.id) ? "id='" + img.id + "' " : ""
		 var imgClass = (img.className) ? "class='" + img.className + "' " : ""
		 var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
		 var imgStyle = "display:inline-block;" + img.style.cssText 
		 if (img.align == "left") imgStyle = "float:left;" + imgStyle
		 if (img.align == "right") imgStyle = "float:right;" + imgStyle
		 if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle		
		 var strNewHTML = "<span " + imgID + imgClass + imgTitle
		 + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
	     + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
		 + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
		 img.outerHTML = strNewHTML
		 i = i-1
	     }
      }
   }

YAHOO.util.Event.addListener(window, "load", correctPNG);

</script>
<![endif]-->

</body>
</html>
